/**
 * Created by evil on 17-3-23.
 */

var COLOR = {
    GREEN: ['#76FF03', '#64DD17'],
    RED: ['#E51C23', '#C41411'],
    YELLOW: ['#FBC02D', '#FFC300'],
    BLUE: ['#039BE5', '#0277BD']
};

var t = {
    title: '成功',
    content: '内容',
    tag: 'success',
    color: COLOR.GREEN,
    time: 3000
};

var toast = {
    success: function (title, content, callback)
    {
        addToast();
        t.title = title;
        t.content = content;
        t.tag = 'success';
        t.color = COLOR.GREEN;
        t.time = 3000;
        this.show(t, callback);
    },
    error: function (title, content, callback)
    {
        addToast();
        t.title = title;
        t.content = content;
        t.tag = 'error';
        t.color = COLOR.RED;
        t.time = 3000;
        this.show(t, callback);
    },
    warning: function (title, content, callback)
    {
        addToast();
        t.title = title;
        t.content = content;
        t.tag = 'warning';
        t.color = COLOR.YELLOW;
        t.time = 3000;
        this.show(t, callback);
    },
    info: function (title, content, callback)
    {
        addToast();
        t.title = title;
        t.content = content;
        t.tag = 'info';
        t.color = COLOR.BLUE;
        t.time = 3000;
        this.show(t, callback);
    },
    show: function (t, callback)
    {
        handler(t);
        show(t, callback);
    }
};

function addToast()
{
    if ($('.toast').length == 0)
    {
        var html = '<div class="toast card"><a class="close" href="#">&times;</a><div class="top"></div><div class="tag"><p></p></div><div class="main"><b><p class="title"></p></b><p class="content"></p></div></div>';
        var css = '*{margin:0;padding:0}.toast{width:300px;height:75pt;background-color:#ddd;position:fixed;top:70px;right:-350px;border-radius:4px 0 0 4px}.card{background:#fff;display:block;margin:1rem 0;box-shadow:0 2px 4px rgba(0,0,0,.16),0 2px 4px rgba(0,0,0,.23);transition:all .2s ease-in-out}.card:hover{box-shadow:0 6px 9px rgba(0,0,0,.19),0 4px 4px rgba(0,0,0,.23)}.toast .close{position:absolute;top:9pt;right:9pt;z-index:100;color:#76ff03;text-decoration:none}.toast .top{left:0;top:0;width:100%;height:10px;border-radius:4px 0 0 0}.toast .tag,.toast .top{position:absolute;background:linear-gradient(90deg,#76ff03,#64dd17)}.toast .tag{left:-35px;top:35px;width:90px;height:40px;border-radius:75pt 75pt}.toast .tag p{color:#fff;position:absolute;top:-2px;width:100%;height:40px;line-height:40px;text-align:center}.toast .main{position:absolute;top:10px;right:0;width:70%;height:90px}.toast .main .title{color:#76ff03;padding:5px}.toast .main .content{font-size:.7em;color:grey;padding:3px}';
        $('body').append(html);

        if ($('style').length == 0)
            $('head').append('<style></style>');

        $('style').append(css);
    }
}

function handler(t)
{
    $('.toast .tag').find('p').text(t.tag);
    $('.toast .title').text(t.title);
    $('.toast .content').text(t.content);
    $('.toast .close').css('color', t.color[0]);
    $('.toast .top').css('background', 'linear-gradient(90deg, ' + t.color[0] + ', ' + t.color[1] + ')');
    $('.toast .tag').css('background', 'linear-gradient(90deg, ' + t.color[0] + ', ' + t.color[1] + ')');
    $('.toast .main .title').css('color', t.color[0]);
}

function show(t, callback)
{
    var timeID;
    var toast = $('.toast');

    toast.animate({
        right: '0'
    }, "fast");

    timeID = setTimeout(function ()
    {
        toast.animate({
            right: '-350px'
        }, "fast", callback);
    }, t.time);

    $('.toast .close').click(function ()
    {
        clearTimeout(timeID);
        timeID = -1;
        toast.animate({
            right: '-350px'
        }, "fast", callback);
    });

    toast.mouseenter(function ()
    {
        clearTimeout(timeID);
    });

    toast.mouseleave(function ()
    {
        if (timeID == -1)
            return;

        setTimeout(function ()
        {
            toast.animate({
                right: '-350px'
            }, "fast", callback);
        }, 1000);
    });
}
